<template>
    <div class="login">
      <div>
        <Card>
          <p slot="title">
            登录
          </p>
          <div class="loginForm">
            <Form ref="loginForm" :model="formModel" :rules="formRules" :label-width="90">
              <FormItem prop="userName" label="用户名：">
                <Input type="text" v-model="formModel.userName" placeholder="请输入用户名"/>
              </FormItem>

              <FormItem prop="userPwd" label="密码：">
                <Input type="password" v-model="formModel.userPwd" placeholder="请输入密码"/>
              </FormItem>

              <FormItem>
                <Button type="primary" @click="login" long>登录</Button>
              </FormItem>
            </Form>
          </div>
        </Card>

        <div class="footer">
          Copyright 2020@浙江前程照明有限公司All Rights Reserved. DESIGN BY : WEETOP
        </div>
      </div>

    </div>
</template>

<script>
    import Cookies from 'js-cookie';
    export default {
        name: "index",
        data(){
            return {
                formModel:{
                    userName:'',
                    userPwd:'',
                },
                formRules:{
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },
            }
        },
        methods:{
            login(){
                let that=this;
                this.$app.post('/tuser/login', {
                    userName:that.formModel.userName,
                    userPwd:btoa(that.formModel.userPwd),
                }).then((res)=>{

                    var millisecond = new Date().getTime();
                    var expiresTime = new Date(millisecond + 60 * 1000 * 60);

                    if(res.data.code==0){
                        this.$app.setHeader(res.data.data.auth_code);
                        Cookies.set("userName",that.formModel.userName,{expires:expiresTime});
                        Cookies.set("userNick",res.data.data.userNick,{expires:expiresTime});
                        that.$Message.success("登录成功")
                        that.$router.push({
                            name:"home"
                        });
                    }else{
                        that.$Message.error("登录失败")
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
  .login{
    width: 100%;
    height: 100%;
    /*background-image: url('../images/login/loginWaitBack.png');*/
    background-image: url('../../images/login/loginWaitBack.png');
    background-size: cover;
    background-position: center;

    display: flex;
    display: -webkit-flex;
    /*align-items: center;*/
    justify-content: center;
    &>div{
      margin-top: 13%;
      position: relative;

      .footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
        color: white;
      }
    }
    .loginForm{
      width: 32rem;
      padding-right: 1.5rem;
      /*height: 18rem;*/
    }
    .formButton{
      float: right;
    }


  }
</style>
